<template>
  <el-main >
    <div class="div" style="width: 1100px;height: 800px;background-color: white">
      <div >
        <el-carousel trigger="click" height="400px" widgh="1000px">
          <el-carousel-item v-for="item in arr" :key="item">
            <img :src="item" width="100%" height="400px">
          </el-carousel-item>
        </el-carousel>
        <span class="demonstration" style="color:orange;font-size: 26px"> 报名直达 <hr>
           【疾速浪漫•西湖爱心线】6月， 齐聚西湖，用脚步记录浪漫，一起在地图上画一个爱心，
                一半青山，一半西湖~）1154人已报名
                <a href="" style="color: orangered"><u style="color:red;">我也要报名</u><hr></a> </span>
        <el-card style="width: 1125px;">
          <p style="color: #409EFF;font-size: 26px">自然风景</p>

            <el-carousel :interval="4000" type="card" height="300px">
              <el-carousel-item v-for="item in 6" :key="item">
                <h3 class="medium"><img style="width: 100%;" src="imgs/spot/a.jpg"></h3>
              </el-carousel-item>
            </el-carousel>

<!--          <el-row :gutter="10" >-->
<!--            <el-col :span="6"><div class="grid-content bg-purple"><img style="width: 254px;height: 280px;" src="imgs/spot/a.jpg"></div></el-col>-->
<!--            <el-col :span="6"><div class="grid-content bg-purple"><img style="width: 254px;height: 280px;" src="imgs/spot/a.jpg"></div></el-col>-->
<!--            <el-col :span="6"><div class="grid-content bg-purple"><img style="width: 254px;height: 280px;" src="imgs/spot/a.jpg"></div></el-col>-->
<!--            <el-col :span="6"><div class="grid-content bg-purple"><img style="width: 254px;height: 280px;" src="imgs/spot/a.jpg"></div></el-col>-->
<!--          </el-row>-->


        </el-card>


        <p style="color: #409EFF;font-size: 26px">活动游记</p>
        <el-row gutter="10">
          <el-col v-for="c in contentArr" span="6">
            <el-card >
              <a style="color: #333;text-decoration: none">
                <a  href="https://www.baidu.com/?tn=44004473_8_oem_dg" >
                  <img :src="c.img" width="100%" height="144"></a>
              </a>
              <el-row gutter="20">
                <el-col span="4">
                </el-col>
                <el-col span="50" style="size: A3" >
                  <a href=""><p style="color:black;">{{c.intro}}}</p></a>
                </el-col>
              </el-row>

            </el-card>
          </el-col>
          <p style="color: #409EFF;font-size: 26px">酒店推荐</p>

          <el-card style="width: 275px;float: left ;" v-for="s in hotel">
              <img style="width: 275px;height: 300px;" :src="s.img_url">
             <p style="text-align: center">{{s.name}}</p>
            <p>{{s.hotel_star}}</p>

             <p style="float: right;font-size: 26px;color:blue;" >{{s.price}}</p>
          </el-card>

        </el-row>
        <el-card style="width: 275px;float: left ;">
        <p style="color: #409EFF;font-size: 26px">精品路线</p>
        </el-card>
      </div>
    </div>

  </el-main>
</template>

<script>
export default {
  data: function () {
    return {
      hotel:[{name:"上海国际旅游度假区融侨酒店",address:"中国，上海，浦东新区，川沙路4019号",price:"￥599",
      phone:"联系方式：13621778886",hotel_star:"⭐⭐⭐⭐",img_url:"imgs/D.jpg",
        intro:"酒店位于上海市浦东新区川沙镇，酒店地处繁华地段，交通便捷，毗邻迪士尼度假区商圈，酒店客房内设有先进的智能化客房电子设备、精致时尚的住宿环境、舒适人性的客房、高效便捷的设施。"},
        {name:"上海古象杉丽酒店",address: "中国，上海，黄浦区，汉口路558号",price: "￥699",
        phone:"联系方式：021-63362288",hotel_star: "⭐⭐⭐⭐",img_url: "imgs/e.jpg",
          intro:"酒店位于上海市黄浦区汉口路（外滩中心地带），地理位置得天独厚，现代高楼的结合与上海的繁华,陶醉于黄浦江畔,领略上海中心的魅力。"},
        {name:"上海古象杉丽酒店",address: "中国，上海，黄浦区，汉口路558号",price: "￥699",
          phone:"联系方式：021-63362288",hotel_star: "⭐⭐⭐⭐",img_url: "imgs/e.jpg",
          intro:"酒店位于上海市黄浦区汉口路（外滩中心地带），地理位置得天独厚，现代高楼的结合与上海的繁华,陶醉于黄浦江畔,领略上海中心的魅力。"},
        {name:"曼哈顿酒店",address: "中国，上海，黄浦区，汉口路558号",price: "￥799",
          phone:"联系方式：021-63362288",hotel_star: "⭐⭐⭐⭐",img_url: "imgs/f.jpg",
          intro:"酒店位于上海市黄浦区汉口路（外滩中心地带），地理位置得天独厚，毗邻外滩、南京东路步行街、陆家嘴、新天地、人民广场、现代高楼的结合与上海的繁华,陶醉于黄浦江畔,领略上海中心的魅力。"}],
      contentArr:[
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"},
        {img:"imgs/img2.jpg",intro:"【探索苏州·平江风月】全年计划，深度探索平江路/探姑苏文艺双绝/重拾苏城烟雨里的锦绣往事"}],

      imgs:["imgs/img2.jpg",
        "imgs/img3.jpg",
        "imgs/img4.jpg",
        "imgs/img5.jpg",
        "imgs/img6.jpg",
        "imgs/img8.jpg"],
      isShow:false,
      oneDay:["亲子","探险","远足"],
      arr:["imgs/product/a.jpg" , "imgs/product/b.jpg" , "imgs/product/c.jpg"],
      arr1:["武功山","青岛","泰山","太湖","九峰山","故宫","东澳岛","木梨硔","海岛自由行","莫干山","昆明"]
    }
  },
  methods: {
    img(){

    },
    change(){
      v.isShow=true
    }
  }
}
</script>

<style>
a{text-decoration: none;font-size: 14px;text-align: center}
a:link{color:#cccccc }
a:hover{color: white}
.center{width: 1200px;margin: 0 auto}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
ul{
  list-style-type: none;
  overflow: hidden;/*解决高度为0 导致的异常*/
}
li{
  float: left;
  margin-right: 10px;
}
/* 轮播图容器样式 */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
}

/* 图片渐隐渐现效果样式 */
.mySlides {
  display: none;
  position: absolute;
  top: -800px;
  left: 250px;
  right: 100px;
  width: 300px;
  height:300px;
}

/* 左右切换箭头样式 */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.2s ease;
}

/* 鼠标悬停时箭头颜色变化 */
.prev:hover,
.next:hover {
  background-color: rgba(0,0,0,0.8);
}

.r1 img{
  width: 135px;
  height: 80px;
}
小标签格式
.img{
  background-color: rgba(255,255,255,0.3);
}
.img:hover{
  /*margin: 10px 0 0 10px;*/
  /*设置为相对定位*/
  position: relative;
  /*通过left/right/top/bottom相对于元素自身位置偏移*/

}
.card{
  height: 245px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>